import { defineComponent } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { getStudentListApi, updateUserApi } from './service';
import { getTableColumns } from './tableConfig';
import { useMessage } from '@/hooks/web/useMessage';

export default defineComponent({
  name: 'TeacherDuty',
  setup() {
    const {
      createMessage: { success },
    } = useMessage();

    const [registerTable, { reload, setLoading }] = useTable({
      title: '学生信息',
      api: getStudentListApi,
      fetchSetting: {
        listField: 'data.records',
      },
      columns: getTableColumns(),
      showTableSetting: true,
      bordered: true,
      useSearchForm: false,
    });

    const handleEditEnd = async ({ record, index, key, value }: Recordable) => {
      await setLoading(true);
      await updateUserApi({ Class: value, UserID: record.UserID });
      success('修改成功');
      await setLoading(false);
      await reload();
      return false;
    };
    return () => (
      <div class="p-4">
        <BasicTable onRegister={registerTable} onEditEnd={handleEditEnd} />
      </div>
    );
  },
});
